<script setup lang="ts">
import { ref, reactive, onMounted, onUnmounted, nextTick } from "vue";
import type { TabsPaneContext } from "element-plus";
import * as echarts from "echarts";

// 创建一个响应式引用来保存DOM元素
const chartDom = ref(null);
let chartInstance = null;
const option = reactive({
  // 这里是ECharts的配置项，可以根据需要绘制不同类型的图表
  title: {},
  tooltip: {
    trigger: "axis"
  },
  legend: {
    data: ["Email", "Union Ads", "Video Ads"]
  },
  grid: {
    left: "3%",
    right: "4%",
    bottom: "3%",
    containLabel: true
  },
  toolbox: {},
  xAxis: {
    type: "category",
    boundaryGap: false,
    data: ["Mon", "Tue", "Wed", "Thu", "Fri", "Sat", "Sun"]
  },
  yAxis: {
    type: "value"
  },
  series: [
    {
      name: "Email",
      type: "line",
      stack: "Total",
      data: [120, 132, 101, 134, 90, 230, 210]
    },
    {
      name: "Union Ads",
      type: "line",
      stack: "Total",
      data: [220, 182, 191, 234, 290, 330, 310]
    },
    {
      name: "Video Ads",
      type: "line",
      stack: "Total",
      data: [150, 232, 201, 154, 190, 330, 410]
    },
    {
      name: "Direct",
      type: "line",
      stack: "Total",
      data: [320, 332, 301, 334, 390, 330, 320]
    },
    {
      name: "Search Engine",
      type: "line",
      stack: "Total",
      data: [820, 932, 901, 934, 1290, 1330, 1320]
    }
  ]
});
const props = defineProps({
  data: {
    type: Array as PropType<Array<number>>,
    default: () => []
  },
  color: {
    type: String,
    default: "#41b6ff"
  }
});
// 初始化ECharts实例并设置配置项（这里以折线图为例，但可灵活替换）
onMounted(async () => {
  getEchoData();
});
// 销毁ECharts实例
onUnmounted(() => {
  if (chartInstance != null && chartInstance.dispose) {
    chartInstance.dispose();
  }
});
const getEchoData = async () => {
  await nextTick(); // 确保DOM已经渲染完成
  chartInstance = echarts.init(chartDom.value);
  chartInstance.setOption(option);
};
const activeName = ref("recharge");
const handleClick = async (tab: TabsPaneContext, event: Event) => {
  console.log(tab.props.name);
  // if (tab.props.name === "recharge") {
  //
  // } else {
  //
  // }
  chartInstance.setOption(option);
};
</script>
<template>
  <el-card shadow="hover">
    <el-tabs v-model="activeName" class="demo-tabs" @tab-click="handleClick">
      <el-tab-pane label="充值量" name="recharge">
        <span style="display: none">1</span>
      </el-tab-pane>
      <el-tab-pane label="注册量" name="register">
        <span style="display: none">1</span>
      </el-tab-pane>
    </el-tabs>
    <div ref="chartDom" style="width: 100%; height: 400px" />
  </el-card>
</template>
